<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 实现飞翔的小鸟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bird {
            width: 140px;
            height: 85px;
            background-image: url("images/bird.png");
            position: absolute;
            top: 150px;
            left: 0;
            animation: bird 1s steps(1) infinite;
        }

        @keyframes bird {
            0% {
                background-position: calc(-141px * 0) 0;
            }
            12.5% {
                background-position: calc(-141px * 1);
            }
            25% {
                background-position: calc(-141px * 2);
            }
            37.5% {
                background-position: calc(-141px * 3);
            }
            50% {
                background-position: calc(-141px * 4);
            }
            62.5% {
                background-position: calc(-141px * 5);
            }
            75% {
                background-position: calc(-141px * 6);
            }
            87.5% {
                background-position: calc(-141px * 7);
            }
            100% {
                background-position: calc(-141px * 8);
            }
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            position: relative;
            background-image: url("images/back2.jpg");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<!--小鸟显示模块-->
<div class="bird"></div>
</body>
<script>
    /* 小鸟移动的速度*/
    var distance = 10;
    /*单位 px */
    var time = 100;
    /*毫秒*/
    /*外边框的宽度*/
    var outerWidth = document.getElementsByTagName("body")[0].offsetWidth;
    /* 小鸟的宽度*/
    var birdDom = document.getElementsByClassName("bird")[0];
    var birdWidth = birdDom.offsetWidth;
    var pointer=true;
    var birdTimeId = setInterval(function (e) {

        if(pointer){
            distance+=10;
            birdDom.style["left"]=distance+"px";
            pointer=(distance+birdWidth +10)>outerWidth?false:true;
            birdDom.style["transform"]="scaleX(1)";
        }else {
            distance-=10;
            birdDom.style["left"]=distance+"px";
            birdDom.style["transform"]="scaleX(-1)";
            pointer=distance<0?true:false;
        }

    }, time);


</script>
</html>